<script setup lang="ts">
definePageMeta({
  layout: 'index-page-layout'
})

let results: Ref<StrokePO[]> = ref([]);

onMounted(function () {

  barTitleStore().setTitle('乘客端 - 我的行程')
  let loadingToast = showLoadingToast({
    message: '加载中',
    duration: 0,
    loadingType: 'circular'
  })

  cFetch<StrokePO>('/stroke/api/list', {
    auth: true,
    defaultOpts: {
      method: 'POST',
      body: {
        role: '0'
      }
    }
  }).then(result => {
    results.value = result.data
    loadingToast.close()
    // closeToast(false)
  }).catch(err => {
    // navigateTo('/login')
    loadingToast.close()
  })

})

function goDetail(item: StrokePO) {
  navigateTo({
    path: useRoute().path + '/detail',
    query: {
      id: item.id,
      from: item.startAddr,
      to: item.endAddr,
      time: item.departureTime,
      quickConfirm: item.quickConfirm,
      status: item.status
    }
  })
  // console.log(id)
}
</script>

<template>
  <div class="content"
       :style="{
      backgroundImage:`url(${ResourceGetter('stroke.png')})`
    }"
  >
    <PassengerStrokeItem
        v-for="item in results"
        :start=item.startAddr
        :end=item.endAddr
        :time=item.departureTime
        :quick-confirm=item.quickConfirm.toString()
        :status=item.status.toString()
        @click="goDetail(item)"
    ></PassengerStrokeItem>
  </div>
</template>

<style scoped>
.content {
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
  position: relative;
  background-attachment: fixed;
  overflow: auto;
}

</style>